import React, { useState, useEffect, useMemo, useContext } from 'react';
import { Button, Card } from 'antd';

import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import { TabStoreContext } from '@/pages/SalaryManage/constant/TabStoreContext';
import { goToSalaryFeedbackLog } from '@/pages/SalaryManage/utils/pageNavigateUtil';
import { feedbackBusiTypeEnum, feedbackBusiType as TAB_KEY } from '@/pages/SalaryManage/enum';
import { pageTabProps } from '@/pages/SalaryManage/utils';

import All from './All';
import Assign from './Assign';
import Handle from './Handle';
import Handled from './Handled';
import Receive from './Receive';

const tabList = [
    // '全部'
    { key: TAB_KEY.ALL, tab: feedbackBusiTypeEnum.getShowName(TAB_KEY.ALL) },
    // '待分配'
    { key: TAB_KEY.ASSIGN, tab: feedbackBusiTypeEnum.getShowName(TAB_KEY.ASSIGN) },
    // '待接收'
    { key: TAB_KEY.RECEIVE, tab: feedbackBusiTypeEnum.getShowName(TAB_KEY.RECEIVE) },
    // '待处理'
    { key: TAB_KEY.HANDLE, tab: feedbackBusiTypeEnum.getShowName(TAB_KEY.HANDLE) },
    // '已处理'
    { key: TAB_KEY.HANDLED, tab: feedbackBusiTypeEnum.getShowName(TAB_KEY.HANDLED) }
];

const contentList = () => ({
    [TAB_KEY.ALL]: <All />,
    [TAB_KEY.ASSIGN]: <Assign />,
    [TAB_KEY.RECEIVE]: <Receive />,
    [TAB_KEY.HANDLE]: <Handle />,
    [TAB_KEY.HANDLED]: <Handled />
});

const SalaryFeedBack = ({ location }) => {
    const { store: { organizationCode, tabCountInfo = {} }, mergeTabStore } = useContext(TabStoreContext);

    const [activeTab, setActiveTab] = useState(null);

    const onTabChange = key => {
        setActiveTab(key);
    };

    const showTabList = (tabs, countInfo) =>
        tabs.map(tabInfo => ({
            ...tabInfo,
            tab: (
                <span style={{ display: 'inline-block' }}>
                    {tabInfo.tab}
                    {countInfo[tabInfo.key] != null ? `(${countInfo[tabInfo.key]})` : null}
                </span>
            )
        }));

    const momoContentList = useMemo(() => contentList()[activeTab], [activeTab]);

    useEffect(() => {
        const active = location?.state?.active || location?.query?.active || TAB_KEY.ALL;
        setActiveTab(active);
    }, [location]);

    useEffect(() => {
        const prd = location.state?.period || location.query?.period;
        const orgCode = location.state?.organizationCode || location.query?.organizationCode;

        const payload = {};

        if (prd) {
            payload.period = prd;
        }

        if (orgCode) {
            payload.organizationCode = orgCode;
        }

        if (Object.keys(payload).length > 0) {
            mergeTabStore(payload);
        }
    }, [mergeTabStore, location]);

    return (
        <PageHeaderWrapper type="success">
            <Card
                tabList={showTabList(tabList, tabCountInfo)}
                activeTabKey={`${activeTab}`}
                onTabChange={key => onTabChange(key)}
                bordered={false}
                tabBarExtraContent={
                    <Button onClick={ () => goToSalaryFeedbackLog(organizationCode) } style={{ marginTop: '12px' }}>
                        操作日志
                    </Button>
                }
                {...pageTabProps()}
            >
                {momoContentList}
            </Card>
        </PageHeaderWrapper>
    );
};
SalaryFeedBack.displayName = 'SalaryFeedBack';

export default React.memo(SalaryFeedBack);
